import * as React from 'react';
import * as ReactDOM from 'react-dom';
// All of the components that you use in a web application should be imported from react-router-dom.
import {BrowserRouter as Router, Link, NavLink, Route, RouteComponentProps} from 'react-router-dom'
import Hello from './App';
import Home from './home/Index';
import './index.css';
import registerServiceWorker from './registerServiceWorker';

// params参数是对象
const index = (params: RouteComponentProps) => {
  console.log(params)
  console.log(params.match.params)
  return (
      <div>
          即将显示的组件
          <br/>1.the Route with path
        <br/>2.path.indexof(other_router_path) > -1 && exact of other_router_path is false
        <br/>显示方式：
          <br/> A Route with no path will always match
        <br/>按照路由书写顺序从上而下显示
        <br/>综上：路由如同组件，是UI的一部分，不过该组件监听url状态，匹配则显示，不匹配则不显示
        {/* /:id参数params只针对/example有效，对/和/test/example无效，且exact不能避免无效对/home */}
        <nav>
          <ul>
            <li>
                {/*<Link/> <Redirect/> history.push history.replace 都有两种用法，1使用pathString，2使用location*/}
              <Link to={{
                  hash: "#the-hash",
                  pathname: "/home/",
                  search: "?sort=name",
                  state: { test: 'get test state ok' }
              }}>Home</Link>
            </li>
            <li>
              选中后的颜色不一样
              <NavLink to="/home/react/" activeStyle={{ color: '#4dc060' }}>react</NavLink>
            </li>
          </ul>
        </nav>
      </div>
)}
const lambda = () => <h3>Please select a topic.</h3>
ReactDOM.render(
  <Router>
    <div>
      <Route path='/' exact={true} component={index}/>
      <Route path="/home/"   component={Home} />
      <Route path="/home/react/" component={Hello} />
      <Route path='/yang/' render={lambda} />
    </div>
  </Router>,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();
